
function displayDate() {
	document.getElementById("jsdemo_1").innerHTML="ret: "+Date();
}

//开关按钮
function on_switch_click()
{
	if (document.getElementById('toggle').checked) {
		console.log('开关打开');
	} else {
		console.log('开关关闭');
	}
}

//虚拟摇杆
var joystickContainer;
var joystick;
let joystickPos = { x: 0, y: 0 };
let isDragging = false;
var g_update_pos_timeoutID;
function joystick_ctrl_init()
{
	joystickContainer = document.getElementById('joystick-container');
	joystick = document.getElementById('joystick');

	joystickContainer.addEventListener('mousedown', (e) => {
		isDragging = true;
		updateJoystickPosition(e);
		clearTimeout(g_update_pos_timeoutID);
		g_update_pos_timeoutID = setTimeout(joystick_pos_move, 200);
	});
	joystickContainer.addEventListener('mousemove', (e) => {
		if (isDragging) {
			updateJoystickPosition(e);
		}
	});
	joystickContainer.addEventListener('mouseup', () => {
		isDragging = false;
		resetJoystickPosition();
	});
	joystickContainer.addEventListener('mouseleave', (e) => {
		isDragging = false;
		resetJoystickPosition();
	});
}
function updateJoystickPosition(e)
{
	const rect = joystickContainer.getBoundingClientRect();
	const stick_rect = joystick.getBoundingClientRect();
	let newX = e.clientX - (rect.left+rect.width/2);
	let newY = e.clientY - (rect.top+rect.height/2);
	// 限制摇杆在容器内移动
	const maxRadius = rect.width/2;
	if (newX < -maxRadius) newX = -maxRadius;
	if (newX > maxRadius) newX = maxRadius;
	if (newY < -maxRadius) newY = -maxRadius;
	if (newY > maxRadius) newY = maxRadius;
	// 更新摇杆位置
	joystickPos = { x: (newX-stick_rect.width/2), y: (newY-stick_rect.height/2) };
	joystick.style.transform = `translate(${joystickPos.x}px, ${joystickPos.y}px)`;
	//发送控制数据-start
	console.log('set pos_offset:(' + newX + ', ' + newY + ')');
}
function resetJoystickPosition()
{
	joystickPos = { x: 0, y: 0 };
	joystick.style.transform = 'translate(-50%, -50%)';
	//发送控制数据-stop
	console.log('set pos_offset:(0,0)');
	clearTimeout(g_update_pos_timeoutID);
}
function joystick_pos_move()
{
	//控制发送操作
	if (ws.readyState === WebSocket.OPEN) {
		var json_obj = {
			type: "jc_fsm",
			cmd: "fsm_position",
			fsm_position: {
				x: parseFloat(document.getElementById('js_fsm_position_x').value) + joystickPos.x,
				y: parseFloat(document.getElementById('js_fsm_position_y').value) + joystickPos.y,
			}
		}
		var json_str = JSON.stringify(json_obj);
		ws.send(json_str);
	}
	document.getElementById('jc_fsm_switch').checked = false;

	g_update_pos_timeoutID = setTimeout(joystick_pos_move, 200);
}

//滑动标尺
function init_ruler_point()
{
	document.querySelector('.vruler').addEventListener('mousemove', function(e) {
		var rect = this.getBoundingClientRect();
		if (e.clientY >= rect.top && e.clientY <= rect.bottom) {
			var pos = (e.clientY - rect.top) / rect.height;
			var pointer = this.querySelector('.vruler-ptr');
			pointer.style.top = (100 - pos * 100) + '%';
			document.getElementById('vruler-ptr-val').textContent = (pos*360.0).toFixed(1) + '°';
		}
	});

	document.querySelector('.ruler').addEventListener('mousemove', function(e) {
		var rect = this.getBoundingClientRect();
		if (e.clientX >= rect.left && e.clientX <= rect.right) {
			var pos = (e.clientX - rect.left) / rect.width;
			var pointer = this.querySelector('.ruler-ptr');
			pointer.style.left = pos * 100 + '%';
			document.getElementById('ruler-ptr-val').textContent = (pos*360.0).toFixed(1);
		}
	});

	canvas_init_draw();
	ruler_test(18, -12); //改变角度值
}

function canvas_init_draw()
{
	var canvas = document.getElementById('player');
	var ctx = canvas.getContext('2d');

	//封面绘制
	ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = "rgba(200, 200, 200, 0.8)";
	ctx.beginPath();
	ctx.moveTo(canvas.width/2-40, canvas.height/2-40);
	ctx.lineTo(canvas.width/2+40, canvas.height/2);
	ctx.lineTo(canvas.width/2-40, canvas.height/2+40);
	ctx.closePath();
	ctx.fill();
}
function ruler_test(yaw, pitch)
{
	var canvas = document.getElementById('player');
	var ctx = canvas.getContext('2d');

	//俯仰刻度尺
	ctx.strokeStyle = "rgba(200, 200, 200, 1.0)";
	ctx.beginPath();
	ctx.moveTo(30, 180);
	ctx.lineTo(20, 180);
	ctx.lineTo(20, 180+240);
	ctx.lineTo(30, 180+240);
	ctx.moveTo(20, 180+30); ctx.lineTo(30,  180+30);
	ctx.moveTo(20, 180+60); ctx.lineTo(30,  180+60);
	ctx.moveTo(20, 180+90); ctx.lineTo(30,  180+90);
	ctx.moveTo(20, 180+120); ctx.lineTo(30, 180+120);
	ctx.moveTo(20, 180+150); ctx.lineTo(30, 180+150);
	ctx.moveTo(20, 180+180); ctx.lineTo(30, 180+180);
	ctx.moveTo(20, 180+210); ctx.lineTo(30, 180+210);
	ctx.stroke();
	//刻度
	ctx.fillText("120°", 30+2, 180+2,   50);
	ctx.fillText("0°",    30+2, 180+122, 50);
	ctx.fillText("-120°",  30+2, 180+242, 50);
	//滑动指针
	ctx.fillStyle = "rgba(250, 10, 10, 1.0)";
	ctx.beginPath();
	ctx.moveTo(30, (120-pitch)+180);
	ctx.lineTo(20, (120-pitch)+180-5);
	ctx.lineTo(20, (120-pitch)+180+5);
	ctx.closePath();
	ctx.fill();
	ctx.fillText(pitch+'°', 30+2, (120-pitch)+180+2, 50);

	//方位刻度尺
	ctx.strokeStyle = "rgba(200, 200, 200, 1.0)";
	ctx.beginPath();
	ctx.moveTo(60, 450);
	ctx.lineTo(60, 460);
	ctx.lineTo(60+360, 460);
	ctx.lineTo(60+360, 450);
	ctx.moveTo(60+30,  450); ctx.lineTo(60+30,  460);
	ctx.moveTo(60+60,  450); ctx.lineTo(60+60,  460);
	ctx.moveTo(60+90,  450); ctx.lineTo(60+90,  460);
	ctx.moveTo(60+120, 450); ctx.lineTo(60+120, 460);
	ctx.moveTo(60+150, 450); ctx.lineTo(60+150, 460);
	ctx.moveTo(60+180, 450); ctx.lineTo(60+180, 460);
	ctx.moveTo(60+210, 450); ctx.lineTo(60+210, 460);
	ctx.moveTo(60+240, 450); ctx.lineTo(60+240, 460);
	ctx.moveTo(60+270, 450); ctx.lineTo(60+270, 460);
	ctx.moveTo(60+300, 450); ctx.lineTo(60+300, 460);
	ctx.moveTo(60+330, 450); ctx.lineTo(60+330, 460);
	ctx.stroke();
	//刻度
	ctx.fillStyle = "rgba(200, 200, 200, 1.0)";
	ctx.fillText("-180°", 60-5,   450-2, 50);
	ctx.fillText("0°",    60+175, 450-2, 50);
	ctx.fillText("180°",  60+355, 450-2, 50);
	//滑动指针
	ctx.fillStyle = "rgba(250, 10, 10, 1.0)";
	ctx.beginPath();
	ctx.moveTo((180+yaw)+60, 450);
	ctx.lineTo((180+yaw)+60-5, 460);
	ctx.lineTo((180+yaw)+60+5, 460);
	ctx.closePath();
	ctx.fill();
	ctx.fillText(yaw+'°', (180+yaw)+60-5, 450-2, 50);
}

